<template>
	<view class="container">
		<view class="screen">
			<view style="display:flex;align-items: center;">
				<view class="middle" :class="{'left':screenType==0}" @click="settype(0)">推荐</view>
				<view class="middle distance" :class="{'left':screenType==1}" @click="settype(1)">销量</view>
			</view>
			<view class="left" @click="show=true">
				领取优惠券
			</view>
		</view>
		<view class="product-box">
			<view class="product-item" v-for="(item,index) in list" @click="top(item.goodsId)">
				<image :src="item.picUrl" mode="aspectFill"></image>
				<view class="product-title">{{item.name}}</view>
				<view class="product-price" v-if="item.isEnableGrade==0">{{item.retailIntegral}}积分</view>
				<view class="product-price" v-if="item.isEnableGrade==1">￥{{item.retailPrice}}</view>
				<view class="product-price" v-if="item.isEnableGrade==2">￥{{item.retailPrice}}+{{item.retailIntegral}}积分
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="14">
			<scroll-view class="quanbox" scroll-y v-if="quanlist.length>0">
				<view class="quan" v-for="(item,index) in quanlist">
					<view class="dpimgbox">
						<image src="../../static/enterprise/item.png" mode="aspectFill"></image>
					</view>
					<view class="dpnamecon">
						<view class="bbbb">
							<view class="ddnn">{{name}}优惠券</view>
							<view class="man" v-if="item.couponType==0">
								<view class="jian">￥{{item.couponMoney}}</view>
								<view class="mmmm">满{{item.couponThreshold}}可用</view>
							</view>
							<view class="man" v-if="item.couponType==1">
								<view class="jian">{{item.couponDiscount}}%</view>
								<view class="mmmm">折扣券</view>
							</view>
						</view>
						<view :class="{'ccc':item.receiveNum>=item.couponNum}" class="btn" @click="receive(item)" >立即领取</view>
					</view>
					<view class="top"></view>
					<view class="bottom"></view>
				</view>
			</scroll-view>
			<view v-else>
				<view style="height: 100rpx;text-align: center;line-height: 100rpx;">
					暂无可用优惠券
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		productlist,youhuiquan,receiveCoupon
	} from "../../api/product.js"
	export default {
		data() {
			return {
				show: false,
				id: null,
				num: 1,
				list: [],
				screenType: 0,
				name:"",
				qnum:"",
				quanlist:[]
			}
		},
		onLoad(e) {
			this.id = e.id
			this.name=e.name
			this.getlist()
			this.getquan()
		},
		onShow() {
			uni.setNavigationBarTitle({
			    title: this.name
			});
		},
		methods: {
			receive(item){
				if(item.receiveNum>=item.couponNum){
					this.msg('优惠券已领完','none')
				}else{
					this.post(receiveCoupon,{couponId:item.couponId}).then(res=>{
						console.log(res)
						this.msg('领取成功','none')
						this.show=false
					})
				}
				
			},
			async getlist() {
				let data = {
					pageNum: this.num,
					pageSize: 10,
					communityId: this.id
				}
				if(this.screenType==1){
					data.screenType=this.screenType
				}
				let res = await this.get(productlist, data)
				this.list = [...this.list, ...res.data]
				this.num++
			},
			top(id) {
				uni.navigateTo({
					url: "/pages/product/product?id=" + id
				})
			},
			// 切换推荐销量
			settype(e) {
				this.screenType = e
				this.list = []
				this.num = 1
				this.getlist()
			},
			async getquan(){
				let res=await this.get(youhuiquan,{shopId:this.id,pageSize:10,pageNum:this.num})
				this.num++
				this.quanlist=[...this.quanlist,...res.data]
			}
		}
	}
</script>

<style lang="less">
	
	.mmmm {
		height: 28rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 28rpx;
		color: #EC5F2A;
		opacity: 1;
	}

	.jian {
		color: #ED712F;
		font-size: 28rpx;
		margin-right: 20rpx;
	}

	.btn {
		width: 140rpx;
		height: 50rpx;
		background: linear-gradient(180deg, #F09238 0%, #EC5F2A 100%);
		opacity: 1;
		border-radius: 30rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		text-align: center;
		line-height: 50rpx;
	}
	.ccc{
		background: #999999 !important;
		opacity:0.5;
	}
	.ddnn {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 42rpx;
		color: #ED712F;
		opacity: 1;
	}

	.bbbb {
		height: 150rpx;
		padding-top: 20rpx;
	}

	.man {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.dpnamecon {
		display: flex;
		align-items: center;
		width: 450rpx;
		justify-content: space-between;
		padding-left: 40rpx;
		box-sizing: border-box;
	}

	.quanbox {
		padding: 30rpx 55rpx;
		max-height: 750rpx;

	}

	.dpimgbox {
		width: 171rpx;
		height: 150rpx;
		border-right: 1px #FF0000 dashed;
		padding-left: 30rpx;
		display: flex;
		align-items: center;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
		}
	}

	.quan {
		height: 150rpx;
		width: 640rpx;
		background-color: #FDECE0;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.top {
		width: 40rpx;
		height: 40rpx;
		background-color: #FFFFFF;
		left: 150rpx;
		top: -20rpx;
		position: absolute;
		border-radius: 40rpx;
	}

	.bottom {
		width: 40rpx;
		height: 40rpx;
		background-color: #FFFFFF;
		left: 150rpx;
		top: 130rpx;
		position: absolute;
		border-radius: 40rpx;
	}

	.container {
		padding-top: 60rpx;
		// padding: 0 30rpx;
	}

	.search_box {
		margin-top: 20rpx;
		margin-left: 30rpx;
		width: 690rpx;
		display: flex;
		align-items: center;
		border-radius: 29rpx;
		border: 1px solid #F09238;
		padding: 0 20rpx;

		image {
			width: 20rpx;
			height: 20rpx;
			margin-right: 20rpx;
		}
	}

	.input {
		width: 690rpx;
		height: 50rpx;
	}

	.screen {
		width: 750rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 30rpx;
		justify-content: space-between;
		border-bottom: 1px solid #EDEDED;
		padding-bottom: 10rpx;
		position: fixed;
		left: 0;
		top: 88rpx;
		/* #ifdef APP-PLUS */
		top: 0;
		/* #endif */
		z-index: 999;
		background-color: #FFF;
	}



	.middle {
		font-size: 24rpx;
		color: #999999;
	}

	.left {
		font-size: 28rpx;
		color: #F09238;
	}

	.distance {
		margin-left: 40rpx;
	}

	.product-box {
		width: 750rpx;
		margin-top: 30rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.product-item {
		width: 330rpx;
		height: 438rpx;
		margin-left: 30rpx;
		margin-bottom: 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx rgba(4, 0, 0, 0.08);
		border-radius: 14rpx;

		image {
			width: 330rpx;
			height: 306rpx;
		}
	}

	.product-title {
		margin-left: 20rpx;
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #000000;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.product-price {
		margin-left: 20rpx;
		margin-top: 10rpx;
		font-size: 30rpx;
		color: #F0812D;
	}
</style>
